<template>
	<!-- 更多分类 -->
	<div class="moreSort">
		<searchNav></searchNav>
		<div class="sort-box">
			<div style="flex: 2;">
				<van-sidebar v-model="activeKey">
				  <van-sidebar-item v-for="(item,i) in sortList" :key='item.id' :title="item.name" @click="onClick(item)"/>
				</van-sidebar>
			</div>
			<div class="inif-box" style="flex: 8;">
				<div class="text">猜你喜欢</div>
				<div>
					<div class="nav-box">
						<div class="ni-box" v-for="(item,i) in sortListInfo" @click="sortListLink(item)" :key='i'>
							<div class="ni-img">
								<img :src="item.image_url" :alt="item.name">
							</div>
							<p>{{item.name}}</p>
						</div>
					</div>
				</div>
				
			</div>
			
		</div>
	</div> <!-- @click="selectNav()" -->
</template>

<script>
	import searchNav from '@/pages/nav/searchNav'
	export default{
		data(){
			return{
				activeKey: 0,
				sortList: [],
				sortListInfo:[],
				id:this.$route.query.id,
				bool:false,
				sortInfo:[]
			}
		},
		created(){
			this.getSortList();
		},
		methods:{
			//列表选项切换
			selectNav(){
				console.log(111)
			},
			//跳转指定分类商品列表
			sortListLink(sort){
				this.$router.push({path:'/sortDetail',query:{name:sort.name,id:this.id}});
				// console.log(sort.name)
			},
			onClick(item) {
				this.getSortListInfo(item.id);
				this.id = item.id;
			},
			//分类列表
			async getSortList() {
				// /parentId=2&isAll=1
				this.bool = true;
				let params = {};
				var urlDate = 'parentId=4';
				const res = await this.$axios.get(this.$api.sortData+'?'+urlDate);
				if (res.success) {
					console.log(res)
					this.sortList = res.data;
					this.getSortListInfo(this.$route.query.id || 0);
				} else {
					this.$toast(res.msg);
				}
				this.bool = false;
			},
			//分类列表详细
			async getSortListInfo(id) {
				this.bool = true;
				let params = {};
				var urlDate = `parentId=${id}&isAll=1`;
				const res = await this.$axios.get(this.$api.sortData+'?'+urlDate);
				if (res.success) {
				  this.sortListInfo = res.data;
				} else {
				  this.$toast(res.msg);
				}
				this.bool = false;
			},
		},
		components:{
			searchNav,
			// loading,
		}
		
	}
</script>

<style lang="less">
	
	.flex-box(@mian-w:80%,){
		.nav-box {
			width: @mian-w;
			min-width: 295px;
			background: #fff;
			border-radius: 6px;
			display: flex;
			margin: 0 auto;
			display: -webkit-flex;
			flex-wrap: wrap;
			text-align: center;
			.ni-box {
				width: 31%;
				height: 58px;
				margin: 6% 1%;
				.ni-img{
					height: 58px;
				}
				p {
					line-height: 20px;
					height: 20px;
					font-size: 12px;
					color: #333333;
				}
			}
			img {
				height: 100%;
				max-width: 60px;
			}
			
		}
	}
	.moreSort{
		.van-sidebar{
			height: calc(100vh - 0.5rem);
			overflow-y: scroll;
		}
		.sort-box{
			display: flex;
			padding-top: 46px;
		}
		//左边栏目
		.van-sidebar-item{
			background: #fff;
			    padding: 20px 12px 20px 0;
		}
		.van-sidebar-item--select{
			background-color: #F7F7F7;
			border-left: none;
			.van-sidebar-item__text{
				border-left: 3px solid #ee0a24;
			}
		}
		.van-sidebar-item__text{
			text-align: center;
			display: block;
		}
		
		.flex-box(90%);
		//详细
		.inif-box{
			.text{
				padding: 20px 0px 20px 0;
				color: #333333;
				font-size: 14px;
				background-color: #F7F7F7;
				width: 90%;
				margin: 0 auto;
			}
		}
	}
	body{
		background: #F7F7F7;
	}
	
</style>
